<template>
	<div class="firstpage">
		<div class="firstpage-nav">
			<div class="brand">
				<p>M</p>
			</div>
			<div class="nav-inp">
				<input type="text" class="nav-inp" placeholder="请输入商品">
			</div>
			<div class="all-shop">
				<router-link to="/firstpage/fgtwo" tag="p" >全部商品</router-link>
			</div>
			<div class="nav-mine">
				<img src="../assets/imger/wode.png" alt="wode">
				<img src="../assets/imger/che.png" alt="che">
				<span>0</span>
			</div>
		</div>
		<div class="f-nav-two">
			<div class="detail">
				<router-link to="/firstpage/fgone" tag="span">首页</router-link>
				<router-link to="/firstpage/fgtwo" tag="span">全部</router-link>
				<span>捐赠名单</span>
				<span>后台管理</span>
				<span>XBoot开发</span>
				<span>宣传</span>
			</div>
		</div>
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
	</div>
</template>

<script>
	export default{
		name:'firstpage'
	}
</script>

<style lang="less" scoped="scoped">
	.firstpage-nav{
		width: 100%;height: .5rem;background-color: #040404;color: white;display: flex;
		justify-content: space-between;
		.brand{
			width: .5rem;height: .5rem;overflow: hidden;
			p{width: .35rem;height: .35rem;border-radius: 50%;background-color: white;
				margin-left: .15rem;margin-top: .075rem;color: black;font-weight: 900;
				font-size: .2rem;text-align: center;line-height: .35rem;
			}
		}
		.nav-inp{
			width: 34%;height: .5rem;line-height: .5rem;margin-right: .15rem;
			input{width: 100%;height: .25rem; border-radius: .25rem;
				background-color: white;padding-left: .15rem;
				&:focus{
					border: 0.5px solid skyblue;
				}
			}
		}
		.all-shop{
			p{
				line-height: .25rem;
			}
		}
		.nav-mine{
			width: 15%;height: .5rem;
			img{width: .18rem;height: .2rem;margin-top:.16rem;}
			span{margin-left: 5px;}
		}
	}
	.f-nav-two{
		width: 100%;height: .4rem;font-size: .12rem;background-color: #F7F7F7;
		line-height: .4rem;border-bottom: 0.5px solid #E6E6E6;
		.detail{
			width: 80%;display: flex;justify-content: space-between;padding: 0 .05rem;
		}
	}
	router-link-active{
		font-size: .17rem;color: skyblue;
	}
</style>
